<template>
  <div>
      <div class="address" v-show="!def">
          <div class="w" >
            <h3 class="w-toph3"> 
               <span>收货人信息</span> 
               <span @click="postADD()">使用新地址</span>
            </h3>
            <div class="w-top-list">
                <template v-for="(ins1,v1) in warr1">
                    <div :key="v1" class="w-list"  v-show="v1 < insd">
                            <div class="list-one" @click="chang(v1)">
                                <i :class="{'list-icon':warrbol[v1]}"  ></i>
                                {{ins1.name}} &nbsp;
                                <span v-for="(ins2,v2) in ins1.ad" :key="v2">{{ins2}}</span>
                                <span v-if="v1==0"> 固定电话{{ins1.phone1}}</span>
                                <span v-if="v1!==0"> 手机{{ins1.phone}}</span>
                                <span v-if="v1==adf"> 默认地址</span>
                            </div>
                            <div class="list-two">
                                <span v-if="v1!=adf" class="list-mo" @click="addDefault(v1)">设置为默认地址</span>
                                <span class="list-gai" @click="updateAdd(v1)">修改</span>
                                <span class="list-gai">删除</span>
                            </div>
                    </div>
                </template>
                <div class="list-hide">
                    <span @click="to()">展开其他地址<i></i></span>
                    <span @click="to2()">收起地址<i></i></span>

                </div>
            </div>
          </div>
      </div>
      <!-- 时间 -->
      <span v-show="bbb">{{bb}}</span>
    <slot>
        <div  v-show="def">
            <h3 class="box2">
                 <span>收货人信息</span>
             </h3>
         <sadd>
             <btn class="btnone">确认并设为默认地址</btn>
         </sadd>
        </div>
    </slot>
    <!-- 遮罩 -->
    <div class="zhe" v-show="def2">
        <div class="Addupdate">
            <h3>添加地址</h3>
          <sadd>
         </sadd>
         <div class="Addupdate-btn">
             <div class="btn1"><i :class="{'icon':bol}" @click="changaa()"></i>设为常用地址</div>
             <div class="btn2">
                 <span @click="gouBack()" class="btn-aa1">返回</span>
                <span class="btn-aa2" @click="goBao()">保存</span>
              </div> 

         </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Sadd from './Add';
import Btn from './Btn';
import Xbtn from './Xbtn';
export default {
    name:'Addlist',
    data(){
        return{
            bol:false,
            def2:false,
            def:false,
            insd:4,
            bbb:false,
            obj:[{
                headPic: "http://mobile.bwstudent.com/images/small/default/user.jpg",
                nickName: "王丽雅",
                phone: "13733336666",
                sessionId: "161059033246784332",
                sex: 1,
                userId: 84332,
            }
            ],
            warr1:[],
            warrbol:[],
            adf:'',
            ins:'',
            warr2:['不需要','个人','单位'],
            addnote:'',
            bb:'',
        }
    },
    components:{
        'sadd':Sadd,
        'btn':Btn,
        'xbtn':Xbtn
    },
    beforeMount(){
        this.addressData();
    },
    mounted(){
        this.over();
    },
    methods:{
        gouBack(){
            this.def2=!this.def2;
        },
        changaa(){
            this.bol=!this.bol;
            console.log(this.bol);
            if(this.bol==true){
                let abc=this.$store.state.obj[0].addressId;
                for(var i=0;i<this.warr1.length;i++){
                    if(this.warr1[i].addId==abc){
                        console.log(this.warr1[i].addId);
                        this.bb=i;
                    }
                }
            }
        },
        // 修改地址
        goBao(){
            console.log(this.$store.state.wadd1);
            var list=this.$store.state.wadd1[1].input;
            var a1=this.$store.state.wadd1[1].input[0].oblast,
            a2=this.$store.state.wadd1[1].input[1].city,
            a3=this.$store.state.wadd1[1].input[2].country,
            a4=this.$store.state.wadd1[2].input[0].detail;
            var str=a1+" "+a2+" "+a3+" "+a4;
            var obj={
                id:this.$store.state.obj[0].addressId,
                realName:this.$store.state.wadd1[0].input[0].names,
                phone:this.$store.state.wadd1[3].input[0].phone,
                address:str,
                zipCode:'101010',
            }
            axios({
                method:'PUT',
                url:'/api/small/user/verify/v1/changeReceiveAddress',
                params:obj,
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId
                }
            }).then(res=>{
                
                console.log(res.data);
                if(this.bb!=''){
                    // 添加
                    var obj={
                        id:this.$store.state.obj[0].addressId
                    };
                    axios({
                        method:'post',
                        url:'/api/small/user/verify/v1/setDefaultReceiveAddress',
                        params:obj,
                        headers:{
                            userId:this.obj[0].userId,
                            sessionId:this.obj[0].sessionId
                        }
                    }).then(res=>{
                        console.log(res.data);
                        if(res.data.message=="设置成功"){
                            this.adf=this.bb;
                            this.chang(this.bb);
                        }
                    });
                
                }
            });
                

        },
       
        // axios地址列表,接口
        addressData(){
            // 获取收货地址列表
            axios({
                method:'get',
                url:'/api/small/user/verify/v1/receiveAddressList',
                headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }
            }).then(res=>{
                // console.log(res.data);
                var aa=res.data.result;
                for(var i=0;i<aa.length;i++){
                    this.bb=res.data.result[i].address;
                    var newbb=this.bb.split(' ');
                    var obj={
                        name:res.data.result[i].realName,
                        ad:newbb,
                        phone:res.data.result[i].phone,
                        addId:res.data.result[i].id,
                        whetherDefault:res.data.result[i].whetherDefault
                    };
                    this.warr1[i]=obj;
                }
                for(var a=0;a<this.warr1.length;a++){
                    // console.log(this.warr1[a].whetherDefault);
                    if(this.warr1[a].whetherDefault==1){
                        this.adf=a;
                        this.chang(a);
                    }
                }
                    

            });
        },
        // 设置默认收货地址
        addDefault(s){
            // console.log(this.warr1[s].addId);
            var obj={
                id:this.warr1[s].addId
            };
            axios({
                method:'post',
                url:'/api/small/user/verify/v1/setDefaultReceiveAddress',
                params:obj,
                headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }
            }).then(res=>{
                // console.log(res.data);
                if(res.data.message=="设置成功"){
                    this.adf=s;
                    this.chang(s);
                }
            });

            this.addressData();
        },
        // 修改地址数据
        updateAdd(s){
            this.def2=!this.def2;
            console.log( this.$store.state.wadd1[0].input[0].names);
            console.log(this.warr1[s].ad[0]);
            this.$store.state.obj[0].addressId=this.warr1[s].addId;
            this.$store.state.wadd1[0].input[0].names=this.warr1[s].name;
            this.$store.state.wadd1[1].input[0].oblast=this.warr1[s].ad[0];
            this.$store.state.wadd1[1].input[1].city=this.warr1[s].ad[1];
            this.$store.state.wadd1[1].input[2].country=this.warr1[s].ad[2];
            this.$store.state.wadd1[2].input[0].detail=this.warr1[s].ad[3];
            this.$store.state.wadd1[3].input[0].phone=this.warr1[s].phone;
        },
        // 跳转到添加地址页面
        postADD(){
            this.def=!this.def;

        },
        to(){
            this.insd=this.warr1.length;
            console.log(this.warr1);
        },
        to2(){
            this.insd=4;
        },
        // 循环数据的值
        over(){
            for(var i=0;i<this.warr1.length;i++){
                this.warrbol.push(false);
            }
        },
        chang(v1){
            this.ins=v1;
            for(var i=0;i<this.warrbol.length;i++){
                this.warrbol[i]=false;
            }
            this.$set(this.warrbol,v1,true);

        }

    }

}
</script>

<style scoped>
/* 遮罩 */
.zhe{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 5;
}
/*  */
.Addupdate{
    width: 678px;
    height: 431px;
    border: 5px solid #e2e2e2;
    margin:100px auto;
    overflow: hidden;
    padding-top: 9px;
    background-color: #fff;
}
.Addupdate>h3{
    border-bottom: 1px solid #e9e9e9;
    color: #498e3d;
    font-size: 18px;
    background-color: #fff;
    line-height: 59px;
    padding-left: 30px;
    text-align: left;
}
.Addupdate-btn {
    text-align: left;
    padding-left: 125px;
    
}
.btn2{
    margin-top: 30px;
}
.btn2 .btn-aa1{
    display: inline-block;
    text-align: left;
    line-height: 35px;
    padding: 0 37px;
    color: #fff;
    background-color: #999;
    border-radius: 6px;
    margin-right: 124px;
}
.btn2 .btn-aa2{
    display: inline-block;
    width: 37px;
    line-height: 35px;
    padding: 0 37px;
    font-size: 16px;
    border-radius: 6px;
    background-color: #f08200;
    color: #fff;
}
/*  */
.box2{
    width: 1280px;
    border-bottom: 1px solid #e9e9e9;
    margin: 0 auto;
    text-align: left;
    line-height: 59px;
}
.btnone{
    text-align: left;
    padding-left: 125px;

}
.btn1 {
    font-size: 16px;
    color: #333;
}
.btn1 i{
    position: relative;
    top: 2px;
    margin-right: 10px;
    display: inline-block;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat 0 0;
} 
.btn1 i.icon{
    background: url(../../../assets/imgs/green-radio.png) no-repeat -24px 0;

}
.yes{
    color: #ffffff;
    display: inline-block;
    padding: 0 30px;
    line-height: 40px;
    border-radius: 6px;
    background-color: #f08200;
}
/* 添加收货地址 */

/*  */
.tijian{
    position: absolute;
    top: -11px;
    left: calc(50% - 10px);
    height: 20px;
    width: 20px;
    border-right:1px solid #d3d3d3 ;
    border-top:1px solid #d3d3d3 ;
    background-color: #f8fff7;
    transform: rotate(-45deg);
}
.timers{
    width: 505px;
    background-color: #f8fff7;
    border: #d3d3d3 1px solid;
    padding: 20px;
    position: relative;
    margin:20px 0 20px 150px;
}
.timers .timersb{
    width: 100%;
    border-top: #d3d3d3 1px solid;
    border-bottom: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    margin-bottom: 20px;
}
.timers .timersb span{
    text-align: center;
    display: inline-block;
    width: 100px;
    line-height: 30px;
    background-color: #fff;
}
.timers .timersb span:nth-child(-n+5){
    border-right: #d3d3d3 1px solid;
}
.timers .timersb span:nth-last-child(-n+5){
    border-right: #d3d3d3 1px solid;
}
.timers .timersb span:nth-child(-n+5){
    border-bottom: 1px solid #d3d3d3;
}
.tim-btn{
    width: calc(100% - 240px);
    padding: 0 120px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    display: flex;
    justify-content: space-evenly;
    /* background-color: #fff; */
    
}
.tim-btn span{
    display: inline-block;
    width: 90px;
    border-radius: 8px;
    text-align: center;
}
.tim-btn span:nth-child(1){
    background-color: #999;
}
.tim-btn span:nth-child(2){
    background-color: #f08200;
}


.addThead{
    text-align: left;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #e9e9e9;
}
.addThead input{
    height: 35px;
    width: 370px;
    border: #d3d3d3 1px solid; 
    margin: 0 16px 19px 4px;
}
.addThead label:nth-of-type(2) i{
    color: #f00;
}
/*  */
.addTicket-two>h3{
    line-height: 59px;
    color: #666;
    font-size: 18px;
    text-align: left;
}
.addTicket-two .addNote{
    line-height: 33px;
    text-align: left;
}
.addNote input{
    height: 33px;
    width: 616px;
    padding-left: 10px;
    border: 1px solid #d3d3d3;
}
/* 地址 */
.address{
    width: 100%;
    
}
.w-toph3{
    line-height: 58px;
    color: #6666;
    font-size: 18px;
    text-align: left;
    position: relative;
}
.w-toph3 span:nth-child(2){
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    line-height: 30px;
    width: 90px;
    text-align: center;
    font-size: 14px;
    background-color: #f08200;
    color: #fff;
}
/* 内容 */
.w-top-list div{
   width: 100%;
}
.w-list div{
    line-height: 36px;
    font-size: 14px;
}
.w-top-list div.w-list2{
    height: 36px;
    line-height: 36px;
    width: 1278px;
    background-color: #f4fff2;
    margin-bottom: 10px;
    border: 1px solid #f4fff2;
    position: relative;
}
.w-top-list div.w-list{
    height: 36px;
    line-height: 36px;
    width: 1278px;
    background-color: #f4fff2;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    position: relative;
    
}
.w-list div.list-one{
    padding-left: 46px;
    width: calc(100% - 276px);
    text-align: left;
    color: #666;
    position: relative;
}
.w-list .list-one i{
    position: absolute;
    top: calc(50% - 8px);
    left: 17px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat 0 0;
    /* background-color: #00f; */
}
.w-list .list-one .list-icon{
    background: url(../../../assets/imgs/green-radio.png) no-repeat -24px 0;
}
.w-list div.list-two{
    position: absolute;
    right: 0;
    top: 0;
    width: 214px;
    text-align: right;
    padding-right: 16px;
}

.w-list div.list-two span.list-mo{
    color: #f08200;
}
.w-list div.list-two span.list-gai{
    color: #498e3d;
    margin-left: 24px;
}
/*隐藏  */
.w-top-list .list-hide{
    line-height: 37px;
    color: #498e3d;
    text-align: left;
    font-size: 16px;
    padding-bottom: 19px;
}
.list-hide span i{
    display: inline-block;
    height: 11px;
    width: 12px;
    margin: 0 19px 0 11px;
}
.list-hide span:nth-child(1) i{
    background: url(../../../assets/imgs/green-jian.png) no-repeat 0 0;
}
.list-hide span:nth-child(2) i{
    background: url(../../../assets/imgs/green-jian.png) no-repeat 0 0;
    transform: rotate(180deg);
}

/* public */
.w{
    width: 1280px;
    margin: 0 auto;
}
.wb{
    width: 100%;
   border-bottom: 1px solid #ddd;
}
</style>